<template>
    <el-container style="height: 1000px; width:1380px;margin-left:0px; margin-right:0px;border: 1px solid #eee">
        <el-header style="height:100px;text-align: right; "> 
            <div style="float:left;width:720px;height:60px;font-size:48px;margin-top:1px">小型图书馆管理系统</div>     
            <span style="float:right;font-size: 24px">{{name}}</span>
        </el-header>
        <el-container>
            <el-aside style="width:160px;margin-top: 0px">
                <switch></switch>
                <SideMenu @indexSelect="listByItem" ref="sideMenu"></SideMenu>
            </el-aside>
            <el-main>
                <MainArea class="main-area" ref="mainArea">
                </MainArea>
            </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
    import SideMenu from './SideMenu.vue'
    import MainArea from './Mainarea.vue'
  
    export default {
      name: 'mainpage',
      components: { MainArea,SideMenu },
      data() {
        return {     
          token: window.sessionStorage.getItem('token'),
          name: window.sessionStorage.getItem('username')
        };
      },
      methods: {
        listByItem () {       
          var cid = this.$refs.sideMenu.cid  
          this.$refs.mainArea.cid = cid         
        }
      }
    }
  </script>
  
  <style scoped>
    .main-area {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .el-aside {
      color: #333;
      background-color: rgb(191, 191, 252);
    }
    .el-header {
      background-color: #5e9ef1;
      color: #333;
      line-height: 100px;
    }
  </style>